
<template>
  <div>
    <div class="header">
      <olp-header-menu></olp-header-menu>
    </div>

    <div class="news_title">
      <el-container class="layout-container-demo" style="height: 500px">
        <el-aside width="200px">
          <el-scrollbar>
            <el-menu :default-openeds="['1', '3']">
              <el-sub-menu index="1">
                <template #title>
                  <el-icon>
                    <message />
                  </el-icon>全部
                </template>
                <el-menu-item-group>
                  <el-menu-item index="1-1" @click="SelectAll">所有公告</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <!-- <el-sub-menu index="2">
                <template #title>
                  <el-icon><icon-menu /></el-icon>角色分类
                </template>
                <el-menu-item-group>
                  <el-menu-item index="2-1" @click="SelectByRole(1)">超级管理员</el-menu-item>
                  <el-menu-item index="2-2" @click="SelectByRole(2)">管理员</el-menu-item>
                  <el-menu-item index="2-3" @click="SelectByRole(3)">员工</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-sub-menu index="3">
                <template #title>
                  <el-icon>
                    <setting />
                  </el-icon>部门分类
                </template>

                <el-menu-item-group>
                  <el-menu-item index="3-1" @click="SelectByDep(1)">集团客户部</el-menu-item>
                  <el-menu-item index="3-2" @click="SelectByDep(2)">市场部</el-menu-item>
                  <el-menu-item index="3-3" @click="SelectByDep(3)">维系小组</el-menu-item>
                  <el-menu-item index="3-4" @click="SelectByDep(4)">技能组</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu> -->
            </el-menu>
          </el-scrollbar>
        </el-aside>

        <el-container>
          <el-header style="text-align: right; font-size: 12px;display: flex;">
            <div style="text-align: left;width: 500px;padding-top: 15px;">
              <el-button @click="SelectByName(sname)">我的公告</el-button>
              <el-button @click="dialogFormVisible3 = true" :disabled="ifauth.newann">发布公告</el-button>
              <el-button @click="ExportAnn()" type="success">导出公告</el-button>
            </div>
            <div class="toolbar">
              <el-dropdown>
                <el-icon style="margin-right: 8px; margin-top: 1px">
                  <Search />
                </el-icon>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-button text @click="dialogFormVisible = true">
                      姓名查询
                    </el-button>
                    <el-dialog v-model="dialogFormVisible" style="width: 450px;">
                      <el-form :model="form">
                        <el-form-item label="查询姓名" :label-width="formLabelWidth">
                          <el-input v-model="form.name" autocomplete="off" />
                        </el-form-item>
                      </el-form>
                      <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="dialogFormVisible = false">取消</el-button>
                          <el-button type="primary" @click="dialogFormVisible = false; SelectByName(form.name)">
                            搜索
                          </el-button>
                        </span>
                      </template>
                    </el-dialog>

                    <el-button text @click="dialogFormVisible2 = true">
                      标题查询
                    </el-button>
                    <el-dialog v-model="dialogFormVisible2" style="width: 450px;">
                      <el-form :model="form2">
                        <el-form-item label="查询标题" :label-width="formLabelWidth">
                          <el-input v-model="form2.name" autocomplete="off" />
                        </el-form-item>
                      </el-form>
                      <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="dialogFormVisible2 = false">取消</el-button>
                          <el-button type="primary" @click="dialogFormVisible2 = false; SelectByTitle(form2.name)">
                            搜索
                          </el-button>
                        </span>
                      </template>
                    </el-dialog>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <span>查询</span>
            </div>
          </el-header>

          <el-main>
            <el-scrollbar>
              <el-table :data="tableData" style="z-index: 1;">
                <el-table-column prop="id" label="编号" width="80" />
                <el-table-column prop="title" label="标题" width="140" />
                <el-table-column prop="category" label="类型" width="100" />
                <el-table-column prop="urgency" label="紧急程度" width="120" />
                <el-table-column prop="content" label="内容">
                  <template v-slot="scope">
                    <el-text type="primary" text @click="scope.row.dialogVisible = true">
                      详情
                    </el-text>

                    <el-drawer v-model="scope.row.dialogVisible" title="公告详情" direction=rtl :append-to-body="true"
                      :modal-append-to-body="false">
                      <div style="padding-bottom: 20px;">
                        <el-text class="mx-1" type="primary" style="font-size: 50px;">{{ scope.row.title
                        }}</el-text>
                      </div>
                      <el-text class="mx-1">{{ scope.row.content }}</el-text>
                      <template #footer>
                        <div style="flex: auto">
                          <el-button type="primary" @click="scope.row.dialogVisible = false">关闭</el-button>
                        </div>
                      </template>
                    </el-drawer>
                  </template>
                </el-table-column>
                <el-table-column prop="targetAudience" label="面向对象" width="120" />
                <el-table-column prop="publisher" label="发布者" width="120" />
                <el-table-column prop="publishTime" label="发布时间" width="200" />
                <el-table-column label="操作" width="300">
                  <template v-slot="scope">
                    <el-button type="primary" round @click="scope.row.dialogFormVisible = true" size="small"
                      :disabled="ifauth.altann">编辑公告</el-button>
                    <el-button type="danger" round text @click="delect(scope.row.id)"
                      :disabled="ifauth.delann">删除</el-button>
                    <el-dialog v-model="scope.row.dialogFormVisible" title="公告" :append-to-body="true"
                      :modal-append-to-body="false">

                      <el-form-item label="公告标题">
                        <el-input v-model="scope.row.title" autocomplete="off" />
                      </el-form-item>
                      <el-form-item label="内容" style="width: 100%;">
                        <el-input v-model="scope.row.content" autosize type="textarea" placeholder="请编辑公告内容" />
                      </el-form-item>
                      <template #footer>
                        <span class="dialog-footer">
                          <el-button @click="scope.row.dialogFormVisible = false">取消</el-button>
                          <el-button type="primary" @click="scope.row.dialogFormVisible = false;
                          AltNotice(scope.row.id, scope.row.title, scope.row.content, scope.row)">
                            确认
                          </el-button>
                        </span>
                      </template>
                    </el-dialog>
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </el-main>
        </el-container>
      </el-container>

      <el-dialog v-model="dialogFormVisible3" title="公告">
        <el-form-item :model="form3">
          <el-form-item label="公告标题" :label-width="formLabelWidth">
            <el-input v-model="form3.title" autocomplete="off" />
          </el-form-item>
          <el-form-item label="公告类型" :label-width="formLabelWidth">
            <el-select v-model="form3.category" placeholder="请选择公告类型">
              <el-option label="公告" value="公告" />
              <el-option label="通知" value="通知" />
            </el-select>
          </el-form-item>
          <el-form-item label="紧急程度" :label-width="formLabelWidth">
            <el-select v-model="form3.urgency" placeholder="请选择紧急程度">
              <el-option label="紧急" value="紧急" />
              <el-option label="宽松" value="宽松" />
            </el-select>
          </el-form-item>
          <el-form-item label="面向对象" :label-width="formLabelWidth">
            <el-select v-model="form3.targetAudience" placeholder="请选择面向对象">
              <el-option label="员工" value="员工" />
              <el-option label="管理员" value="管理员" />
              <el-option label="全体用户" value="全体用户" />
            </el-select>
          </el-form-item>
          <el-form-item label="发布方式" :label-width="formLabelWidth">
            <el-select v-model="form3.time" placeholder="请选择发布方式">
              <el-option label="立即发布" value="time1" @click="way = false" />
              <el-option label="定时发布" value="time2" @click="way = true" />
            </el-select>
          </el-form-item>
          <el-form-item label="发布时间" :label-width="formLabelWidth" v-if="way">
            <el-date-picker v-model="form3.data1" type="date" placeholder="请选择发布时间" :size="large" />
            <el-time-picker v-model="form3.data2" placeholder="请选择发布时间" />

          </el-form-item>
          <el-form-item label="内容" :label-width="formLabelWidth">
            <el-input v-model="form3.text" autosize type="textarea" placeholder="请编辑公告内容" />
          </el-form-item>
        </el-form-item>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible3 = false">取消</el-button>
            <el-button type="primary"
              @click="dialogFormVisible3 = false;
              AddNotice(form3.title, form3.category, form3.urgency, form3.targetAudience, form3.text, username, form3.data1, form3.data2)">
              确认
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>

  </div>
</template>

<script setup>
import OlpHeaderMenu from '../components/base/OlpHeaderMenu/OlpHeaderMenu.vue'
import { ref, reactive } from 'vue'
import { Menu as IconMenu, Message, Setting, Search } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import SecurityAPI from '.././api/security/index'
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogFormVisible = ref(false)
const dialogFormVisible2 = ref(false)
const dialogFormVisible3 = ref(false)
const formLabelWidth = '140px'
const way = ref(false)
const sname = JSON.parse(localStorage.getItem('token')).name
const router = useRouter()
onMounted(() => {

  if (localStorage.getItem('token') == `""` || localStorage.getItem('token') == null) {
    router.push('/')
  }


  SecurityAPI.Notice.NoticeAPI.openAll().then(res => {
    console.log(res)
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i]
    }
    console.log(tableData)
  })

  SecurityAPI.Permisson.PermissonAPI.openById(JSON.parse(localStorage.getItem('token')).staffId).then(res => {
    console.log(res)
    ifauth.newann = !(res.data[0].authList.indexOf("新增公告") !== -1)
    ifauth.altann = !(res.data[0].authList.indexOf("修改公告") !== -1)
    ifauth.delann = !(res.data[0].authList.indexOf("删除公告") !== -1)
    // ifauth.roleid = tablerole(res.data[0].roleName)
  })

})
const username = JSON.parse(localStorage.getItem('token')).name
const ifauth = reactive({})
const form3 = reactive({
  title: '',
  text: '',
  time: '',
  data1: '',
  data2: ""
})

const form = reactive({
  name: '',
})
const form2 = reactive({
  name: '',
})
const tableData = reactive([])


const delect = (noticeid) => {
  ElMessageBox.confirm(
    '您确定要删除吗?',
    '删除公告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      DelectNoticeId(noticeid)
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}



const SelectAll = () => {
  SecurityAPI.Notice.NoticeAPI.openAll().then(res => {
    console.log("查询全部")
    console.log(res)
    tableData.splice(0, tableData.length)
    if (res.data != null && res.data != "") {
      for (var i = 0; i < res.data.length; i++) {
        tableData[i] = res.data[i]
      }
    }
  })
}

const SelectByRole = (roleid) => {
  SecurityAPI.Notice.NoticeAPI.openByRole(roleid).then(res => {
    console.log("通过角色查询" + roleid)
    console.log(res)
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i]
    }
  })
}

const SelectByDep = (depid) => {
  SecurityAPI.Notice.NoticeAPI.openByDep(depid).then(res => {
    console.log("通过部门查询" + depid)
    console.log(res)
    tableData.splice(0, tableData.length)
    for (var i = 0; i < res.data.length; i++) {
      tableData[i] = res.data[i]
    }
  })
}

const SelectByTitle = (title) => {
  SecurityAPI.Notice.NoticeAPI.openByTitle(title).then(res => {
    console.log("通过标题查询" + title)
    console.log(res)
    tableData.splice(0, tableData.length)
    if (res.data != null && res.data != "") {
      for (var i = 0; i < res.data.length; i++) {
        tableData[i] = res.data[i]
      }
    }
  })
}

const SelectByName = (name) => {
  SecurityAPI.Notice.NoticeAPI.openByName(name).then(res => {
    console.log("通过姓名查询" + name)
    console.log(res)
    tableData.splice(0, tableData.length)
    if (res.data != null && res.data != "") {
      for (var i = 0; i < res.data.length; i++) {
        tableData[i] = res.data[i]
      }
    }
  })
}

const DelectNoticeId = (id) => {
  SecurityAPI.Notice.NoticeAPI.delectNoticeId(id).then(res => {
    console.log("删除公告" + id)
    console.log(res)
    SecurityAPI.Notice.NoticeAPI.openAll().then(res => {
      tableData.splice(0, tableData.length)
      if (res.data != null && res.data != "") {
        for (var i = 0; i < res.data.length; i++) {
          tableData[i] = res.data[i]
        }
      }
    })
  })
}


const AddNotice = (title, category, urgency, targetAudience, text, name, data1, data2) => {
  const newAnn = {}
  newAnn.title = title
  newAnn.content = text
  newAnn.category = category
  newAnn.urgency = urgency
  newAnn.targetAudience = targetAudience
  newAnn.publisher = name
  if (data1) {
    console.log(data1, data2)
    const originalDate = new Date(data1)
    const originalDate2 = new Date(data2)
    const year = originalDate.getFullYear();
    const month = originalDate.getMonth() + 1;
    const day = originalDate.getDate();
    const hours = originalDate2.getHours();
    const minutes = originalDate2.getMinutes();
    const seconds = originalDate2.getSeconds();
    const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')} ${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
    newAnn.publishTime = formattedDate
    console.log(formattedDate)
  }
  newAnn.attachments = ""
  console.log("11111111111111", newAnn)
  SecurityAPI.Notice.NoticeAPI.addNotice(newAnn).then(res => {
    console.log("新增公告" + newAnn)
    console.log(res)
  })
}

const AltNotice = (id, title, text, data) => {
  const altAnn = {}
  altAnn.id = id
  altAnn.title = title
  altAnn.content = text
  altAnn.keywords = data.keywords
  altAnn.category = data.category
  altAnn.urgency = data.urgency
  altAnn.publishTime = data.publishTime
  altAnn.publisher = data.publisher
  altAnn.targetAudience = data.targetAudience
  altAnn.attachments = data.attachments

  SecurityAPI.Notice.NoticeAPI.altNotice(altAnn).then(res => {
    console.log("修改公告" + altAnn)
    console.log(res)
  })
}

const ExportAnn = () => {
  SecurityAPI.Notice.NoticeAPI.exportAnn().then(res => {
    console.log("导出公告")
    console.log(res)
    window.location.href = "http://localhost:8080/announcementController/export?format=txt"
  })
}

</script>

<style lang="scss" scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}

.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}

.layout-container-demo .el-menu {
  border-right: none;
}

.layout-container-demo .el-main {
  padding: 0;
}

.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding-left: 500px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>